
<template>
  <div>
    <Card ref="card">
      <p slot="title">核查阶段汇总- {{groupname}}</p>
      <Row>
        <Col span="20">
          <Form inline>
            <FormItem>
              <Select v-model="town" size="large" style="width:120px" placeholder="选择乡镇">
                <Option
                  v-for="item in townList"
                  :value="item.TownName"
                  :key="item.TownName"
                >{{ item.TownName }}</Option>
              </Select>
            </FormItem>
            <FormItem>
              <Select v-model="personState" size="large" style="width:120px" placeholder="所有人员">
                <Option
                  v-for="item in stateList"
                  :value="item.value"
                  :key="item.value"
                >{{ item.label }}</Option>
              </Select>
            </FormItem>
            <FormItem>
              <DatePicker
                type="date"
                placeholder="开始日期"
                size="large"
                style="width:160px"
                v-model="sdate"
                format="yyyy年MM月dd日"
              ></DatePicker>
              <DatePicker
                style="margin-left:10px;width:160px"
                type="date"
                placeholder="结束日期"
                size="large"
                v-model="edate"
                format="yyyy年MM月dd日"
              ></DatePicker>
            </FormItem>
            <FormItem>
              <Select
                v-model="tempEmp"
                size="large"
                placeholder="选择员工"
                @on-change="s=>{ Search();}"
              >
                <Option
                  v-for="item in empList"
                  :value="item.Gid"
                  :key="item.Gid"
                >{{ item.EmployeeName }}</Option>
              </Select>
            </FormItem>
            <FormItem>
              <Input v-model="pName" size="large" style="width:160px" placeholder="姓名/身份证号/住址" />
            </FormItem>
            <FormItem>
              <Checkbox v-model="isNew" size="large">
                <span>仅查新增人员</span>
              </Checkbox>
            </FormItem>
            <FormItem>
              <Button @click="Search" size="large" type="primary" icon="ios-search">查询</Button>
            </FormItem>
          </Form>
        </Col>
        <Col span="4" style="text-align:right">
          <Button
            @click="Export"
            size="large"
            type="primary"
            :loading="exportLoading"
            icon="md-download"
          >导出</Button>
        </Col>
      </Row>
    </Card>
    <iframe id="iframe-print" frameborder="0" style="display:none" scrolling="auto" :src="printSrc"></iframe>
    <Modal :mask-closable="false" v-model="modal2" width="500">
      <p slot="header" class="color-primary text-align-center">
        <Icon type="ios-information-circle"></Icon>
        <span>修改核查对象信息</span>
      </p>
      <Form :model="personTemp" :label-width="80">
        <FormItem label="姓名">
          <Input type="text" v-model="personTemp.Name" size="large" />
        </FormItem>
        <FormItem label="性别">
          <RadioGroup v-model="personTemp.Sex">
            <Radio label="男" class="margin-right-10"></Radio>
            <Radio label="女" class="margin-right-10"></Radio>
          </RadioGroup>
        </FormItem>
        <FormItem label="身份证号">
          <Input v-model="personTemp.IdCardNo" size="large" />
        </FormItem>
        <FormItem label="所属乡镇">
          <Input v-model="personTemp.Town" size="large" />
        </FormItem>
        <FormItem label="地址">
          <Input v-model="personTemp.Address" size="large" />
        </FormItem>
      </Form>
      <div slot="footer">
        <Button type="primary" size="large" v-on:click="SaveDBPerson">保存</Button>
      </div>
    </Modal>
    <Modal :mask-closable="false" v-model="modal3" width="500">
      <p slot="header" class="color-primary text-align-center">
        <Icon type="ios-information-circle"></Icon>
        <span>请输入打印标题</span>
      </p>
      <Row>
        <Input v-model="pringtTitle" size="large" placeholder="打印标题" />
      </Row>
      <br />

      <div slot="footer">
        <Button type="primary" size="large" v-on:click="Print">确定</Button>
      </div>
    </Modal>
    <Modal :mask-closable="false" v-model="modalRemark" width="500">
      <p slot="header" class="color-primary text-align-center">
        <Icon type="ios-information-circle"></Icon>
        <span>填写备注信息</span>
      </p>
      <Row>
        <Input v-model="personTemp.Remark" size="large" placeholder="备注" />
      </Row>

      <div slot="footer">
        <Button type="primary" size="large" v-on:click="SaveRemark">保存</Button>
      </div>
    </Modal>
    <Row class="margin-top-10">
      <Table
        show-summary
        sum-text="合计"
        :summary-method="handleSummary"
        border
        :columns="tableTitle"
        :data="tableData"
        ref="table"
        :height="tableHeight"
      ></Table>
    </Row>
    <Row class="margin-top-10">
      <Page
        :total="total"
        :current="pPage"
        :page-size="pSize"
        :page-size-opts="[50,100,300,500,1000,2000,5000]"
        @on-change="s=>{pPage=s;Search();}"
        @on-page-size-change="p=>{pSize=p;pPage=1;Search()}"
        show-total
        show-sizer
      />
    </Row>
  </div>
</template>
<script>
import excel from "@/libs/excel";
import { Message, Modal } from "view-design";
import { printUrl } from "@/libs/util";
import { GetGroupTown, SaveActionLog, SearchEmployee } from "@/api/data";
import dayjs from "dayjs";
import {
  SearchDBPerson,
  DeleteDBPerson,
  SaveDBPerson,
  SaveDBPersonRemark,
} from "@/api/dbdata";
export default {
  name: "db_search_person",
  data() {
    return {
      printSrc: printUrl + "printlistnoresult.html",
      tableHeight: 450,
      total: 0,
      pPage: 1,
      pSize: 50,
      tempEmp: "0",
      exportLoading: false,
      groupname: "",
      isNew: false,
      modal2: false,
      modal3: false,
      modalRemark: false,
      pringtTitle: "",
      empList: [],
      personTemp: {},
      sdate: dayjs().format("YYYY年MM月DD日"),
      edate: dayjs().format("YYYY年MM月DD日"),
      tableTitle: [
        {
          title: "序号",
          key: "R_INDEX",
          align: "center",
          width: 80,
        },
        {
          title: "操作",
          key: "action",
          width: 150,
          align: "center",
          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "primary",
                    size: "small",
                  },
                  style: {
                    marginRight: "5px",
                  },
                  on: {
                    click: () => {
                      this.personTemp = params.row;
                      this.modal2 = true;
                    },
                  },
                },
                "修改"
              ),
              h(
                "Button",
                {
                  props: {
                    type: "error",
                    size: "small",
                  },
                  on: {
                    click: () => {
                      this.DeleteDBPerson(params.row.Gid);
                    },
                  },
                },
                "删除"
              ),
            ]);
          },
        },
        {
          title: "姓名",
          key: "Name",
          align: "center",
          width: 120,
        },
        {
          title: "性别",
          key: "Sex",
          align: "center",
          width: 80,
        },
        {
          title: "保障人口",
          key: "EnsureCount",
          align: "center",
          width: 100,
        },
        {
          title: "乡镇",
          key: "Town",
          align: "center",
          minWidth: 100,
        },
        {
          title: "村居/社区",
          key: "Community",
          align: "center",
          minWidth: 100,
        },
        {
          title: "住址",
          key: "Address",
          align: "center",
          minWidth: 150,
        },
        {
          title: "身份证号",
          key: "IdCardNo",
          align: "center",
          minWidth: 150,
        },

        {
          title: "状态",
          align: "center",
          width: 120,
          render: (h, rparams) => {
            if (rparams.row.DBInfo == null || rparams.row.DBInfo.Gid == null) {
              return h(
                "Tag",
                {
                  props: {
                    color: "default",
                  },
                },
                "待核查"
              );
            } else {
              return h(
                "Button",
                {
                  props: {
                    type: this.GetDBState(1, rparams.row.DBInfo.State),
                    size: "small",
                  },
                  on: {
                    click: () => {
                      this.$router.push({
                        name: "db_info",
                        params: { id: rparams.row.Gid, name: rparams.row.Name },
                      });
                    },
                  },
                },
                rparams.row.StateName
              );
            }
          },
        },
        {
          title: "是否新增",
          key: "IsNew",
          align: "center",
          width: 100,
          render: (h, params) => {
            if (params.row.IsNew == 1) {
              return h("div", "新增");
            } else {
              return h();
            }
          },
        },
        {
          title: "核查人员",
          key: "EmployeeName",
          align: "center",
          minWidth: 100,
        },
        {
          title: "备注",
          align: "center",
          minWidth: 150,
          key: "Remark",
          render: (h, params) => {
            return h("div", [
              h(
                "span",
                {
                  style: "margin-right:10px",
                },
                params.row.Remark
              ),
              h(
                "Button",
                {
                  props: {
                    type: "primary",
                    size: "small",
                  },
                  style: {
                    marginRight: "5px",
                  },
                  on: {
                    click: () => {
                      this.personTemp = params.row;
                      this.modalRemark = true;
                    },
                  },
                },
                "编辑"
              ),
            ]);
          },
        },
      ],
      tableData: [],
      stateList: [
        {
          label: "状态",
          value: "-1",
        },
        {
          label: "待核查",
          value: "0",
        },
        {
          label: "符合",
          value: "1",
        },
        {
          label: "不符合",
          value: "2",
        },
        {
          label: "待复议",
          value: "3",
        },
        {
          label: "无法核查",
          value: "4",
        },
      ],
      personState: "-1",
      pName: "",
      town: "",
      townList: [],
    };
  },
  props: {
    id: {
      type: String,
      required: true,
    },
  },
  watch: {
    personState: function (newQuestion, oldQuestion) {
      this.Search();
    },
    town: function (newQuestion, oldQuestion) {
      this.Search();
    },
    // ,id: function(newQuestion, oldQuestion) {
    //  this.personState="-1";
    //   this.Search();
    // }
  },
  methods: {
    handleSummary({ columns, data }) {
      const sums = {};
      columns.forEach((column, index) => {
        const key = column.key;
        if (index === 0) {
          sums[key] = {
            key,
            value: "合计",
          };
          return;
        }
        const values = data.map((item) => Number(item[key]));
        if (key == "EnsureCount") {
          const v = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return prev + curr;
            } else {
              return prev;
            }
          }, 0);
          sums[key] = {
            key,
            value: v,
          };
        } else {
          sums[key] = {
            key,
            value: " ",
          };
        }
      });

      return sums;
    },
    dayjs,
    handleEdit(row) {
      if (row.$isEdit) {
        this.$set(row, "$isEdit", false);
      } else {
        this.$set(row, "$isEdit", true);
      }
    },
    handleSave(row, index) {
      if (row.$isEdit) {
        this.$set(row, "$isEdit", false);
      } else {
        this.$set(row, "$isEdit", true);
      }
    },
    SaveDBPerson() {
      let vm = this;
      if (!this.personTemp.Name) {
        Message.error("姓名不能为空");
        return;
      }
      if (!this.personTemp.IdCardNo) {
        Message.error("身份证号不能为空");
        return;
      }
      if (!this.personTemp.Address) {
        Message.error("住址不能为空");
        return;
      }
      SaveDBPerson(this.personTemp).then((res) => {
        const data = res.data;
        if (data.Type == 1) {
          vm.modal2 = false;
          vm.GetGroupTown();
        } else {
          this.$Modal.error({ title: "提示", content: data.Message });
        }
      });
    },
    SaveRemark() {
      let vm = this;
      var reqData = {
        gid: this.personTemp.Gid,
        remark: this.personTemp.Remark,
      };
      SaveDBPersonRemark(reqData).then((res) => {
        const data = res.data;
        if (data.Type == 1) {
          this.Search();
          vm.modalRemark = false;
        } else {
          this.$Modal.error({ title: "提示", content: data.Message });
        }
      });
    },
    DeleteDBPerson(id) {
      this.$Modal.confirm({
        title: "提示",
        content: "确定要删除此核查对象吗？",
        onOk: () => {
          DeleteDBPerson(id).then((res) => {
            const data = res.data;
            if (data.Type == 1) {
              this.Search();
              this.$Modal.success({ title: "提示", content: "删除成功" });
            } else {
              this.$Modal.error({ title: "提示", content: data.Message });
            }
          });
        },
        onCancel: () => {},
      });
    },
    GetGroupTown() {
      let vm = this;
      GetGroupTown(vm.id).then((res) => {
        const data = res.data;
        if (data.Type == 1) {
          vm.townList = data.Data;
          var all = { TownName: "所有乡镇" };
          vm.townList.unshift(all);
        } else {
          this.$Modal.error({ title: "提示", content: data.Message });
        }
      });
    },
    SearchEmployee() {
      let vm = this;
      SearchEmployee({}).then((res) => {
        const data = res.data;
        if (data.Type == 1) {
          vm.empList = data.Data;
          var all = { EmployeeName: "所有员工", Gid: "0" };
          vm.empList.unshift(all);
        } else {
          this.$Modal.error({ title: "提示", content: data.Message });
        }
      });
    },
    Search() {
      let vm = this;
      var isnew = 0;
      if (vm.isNew) {
        isnew = 1;
      }
      var town = vm.town;
      if (town == "所有乡镇") {
        town = "";
      }
      if (typeof vm.sdate == "object") {
        vm.sdate = vm.dayjs(vm.sdate).format("YYYY-MM-DD");
      }
      if (typeof vm.edate == "object") {
        vm.edate = vm.dayjs(vm.edate).format("YYYY-MM-DD");
      }
      var reqData = {
        groupid: vm.id,
        grouptown: town,
        state: vm.personState,
        isnew: isnew,
        page: vm.pPage,
        size: vm.pSize,

        str: vm.pName,
        empid: vm.tempEmp == "0" ? "" : vm.tempEmp,
        sdate: vm.sdate,
        edate: vm.edate,
      };
      SearchDBPerson(reqData).then((res) => {
        const data = res.data;
        if (data.Type == 1) {
          vm.total = data.Data.Total;
          vm.tableData = data.Data.Rows;
        } else {
          Message.error(data.Message);
        }
      });
    },
    SaveActionLog(vaction, vfield) {
      var reqData = {
        Action: vaction,
        Filed: vfield,
      };
      SaveActionLog(reqData).then((res) => {});
    },
    GetDBState(type, state) {
      if (type == 1) {
        if (state == 1) {
          return "success";
        } else if (state == 2) {
          return "error";
        } else if (state == 3) {
          return "warning";
        } else {
          return "";
        }
      } else {
        if (state == 1) {
          return "符合";
        } else if (state == 2) {
          return "不符合";
        } else if (state == 3) {
          return "待复议";
        } else {
          return "未知";
        }
      }
    },
    Export() {
      if (this.tableData.length) {
        const sorted = this.groupBy(this.tableData, function (item) {
          return [item.Town];
        });
        this.exportLoading = true;
        const params = {
          title: [
            "序号",
            "姓名",
            "性别",
            "乡镇",
            "村居/社区",
            "住址",
            "身份证号",
             "联系方式",
            "是否建档立卡",
            "状态",
            "保障人口",
            "符合人员",
            "家庭年人均收入",
            "是否新增",
            "备注",
            "情况描述",
            "核查备注",
            "核查人员",
          ],
          key: [
            "R_INDEX",
            "Name",
            "Sex",
            "Town",
            "Community",
            "Address",
            "IdCardNo",
            "Phone",
            "IsRecordName",
            "StateName",
            "EnsureCount",
            "FinalResult2",
            "InComeAvg",
            "IsNew",
            "Remark",
            "PoorDesc",
            "DBRemark",
            "EmployeeName",
          ],
          data: sorted,
          autoWidth: true,
          filename: this.groupname,
        };
        excel.export_array_to_excel_more(params);
        this.exportLoading = false;
        this.SaveActionLog("导出", this.groupname);
      } else {
        this.$Message.info("表格数据不能为空！");
      }
    },
    groupBy(array, f) {
      const groups = {};
      array.forEach(function (o) {
        const group = f(o);
        groups[group] = groups[group] || [];
        groups[group].push(o);
      });
      return Object.keys(groups).map(function (group) {
        return groups[group];
      });
    },
    InputPrintTitle() {
      if (!this.pringtTitle) {
        this.pringtTitle = this.groupname;
      }
      this.modal3 = true;
    },
    Print() {
      this.modal3 = false;
      var tableobj = {
        Table: this.tableData,
      };
      document
        .getElementById("iframe-print")
        .contentWindow.printData(this.pringtTitle, JSON.stringify(tableobj));
      this.SaveActionLog("打印", this.groupname);
    },
  },
  created() {},
  mounted() {
    var cardHeight = this.$refs.card.$el.offsetHeight;
    this.tableHeight = window.innerHeight - cardHeight - 260;
    this.groupname = this.$route.query.groupname;
    this.GetGroupTown();
    this.SearchEmployee();
    this.Search();
  },
};
</script>
